Skip to content

feat: built the step 3 Ui for withdrawal#51

Merged
0xDeon merged 4 commits intoSpherre-Labs:mainfrom
davedumto:feat-build-step-3-ui-with-functionality
Apr 30, 2025
Merged

feat: built the step 3 Ui for withdrawal#51
0xDeon merged 4 commits intoSpherre-Labs:mainfrom
davedumto:feat-build-step-3-ui-with-functionality

Conversation

@davedumto
Copy link
Contributor

This PR adds the Final Review page (step 3) to the withdrawal flow. The review page allows users to verify all transaction details before execution, showing the sending and receiving accounts, transaction amount, fees, and providing an optional note field. The UI matches our established design system with the same styling patterns used in steps 1 and 2 of the withdrawal flow.

Related Issue

closes #42

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation update
  • Other (please describe)

How Has This Been Tested?

  • Unit tests
  • Integration tests
  • Manual tests
  • Other (tested component rendering and navigation flow in the development environment)

Checklist:

  • I have read the contributing guidelines.
  • I have updated the documentation (if applicable).
  • My changes do not break existing functionality.
  • I have added tests that cover my changes (if applicable).
  • All new and existing tests pass.
  • I have included screenshots or GIFs to demonstrate the changes (if applicable).

Screenshots (if applicable)

Screenshot 2025-04-29 at 16 00 20

Additional Notes

  1. Implemented the Final Review page based on the approved design mockups
  2. Used the WithdrawalSteps component for consistent step indicator display
  3. Added transaction summary showing source account, destination wallet, and amount
  4. Implemented the visual transaction flow representation with account icons and connecting arrows
  5. Added order summary section with amount, fee and total breakdown
  6. Included note field for users to add transaction comments
  7. Added proper navigation between withdrawal steps and cancel functionality
  8. The Execute button completes the withdrawal flow and returns to the dashboard
  9. Image paths for the Backstage Boys account avatar and USDT icon are placeholder paths that will be updated in the implementation phase

@0xDeon 0xDeon self-requested a review April 30, 2025 01:04
Copy link
Contributor

@0xDeon 0xDeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm

@0xDeon 0xDeon merged commit e676a74 into Spherre-Labs:main Apr 30, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FRONTEND] Implement Withdrawal Page (Step 3)

2 participants